<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加部门</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">部门名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级部门</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-dept" readonly="readonly" id="parentId" placeholder="上级部门">
            </div>
          </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号" class="form-control">
				</div>
		 </div>
		   <div class="form-group">
				<label for="remarkId" class="col-sm-2 control-label">备注：</label>
				<div class="col-sm-10">
					<input type="text" id="remarkId" placeholder="备注" class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择部门</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="zTreeId" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
   </div>
      
  </div>
  </script>
 <script type="text/javascript">
  var zTree; 
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  
    $(function(){
	  $(".form-horizontal")
	  .on("click",".load-sys-dept",doLoadZtreeNodes)

	  
	  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)
	  .on("click",".btn-save",doSaveOrUpdate);
	  
	  $("#treeLayer")
      .on("click",".btn-confirm",doSetSelectNode)
      .on("click",".btn-cancel",doHideTree)

	  let data=$("#mainContentId").data("rowData");
	  if(data)doInitEditFormData(data);


     });
    function doInitEditFormData(data) {
			$("#nameId").val(data.name);
			$("#sortId").val(data.sort);
			$("#remarkId").val(data.remark);
			$("#parentId").val(data.parentName);
			$("#parentId").data("parentId", data.parentId);
     }

    function doCancel() {
			$("#mainContentId").load("/modules/sys/dept_list.html", function() {
				$("#mainContentId").removeData();
				$("#parentId").removeData();
			})
	}
		
		function doSaveOrUpdate() {
			//1.获取表单数据
            let params = doGetEditFormData();
            let rowData = $("#mainContentId").data("rowData");
			if (rowData)params.id = rowData.id;
			//2.定义url
			let url = `${baseUrl}/dept/`;
            let method = rowData ?'put':'post';
			//3.异步提交数据
			$.ajax({method:method,
                    url:url,
                    crossDomain:true,
                    xhrFields:{withCredentials:true},
                    data:JSON.stringify(params),
                    contentType:"application/json",
                    success(result) {
				      if (result.state == 1) {
					    alert(result.message);
					    doCancel();
				      }else {
					    alert(result.message);
				      }
			}});
		}

		function doGetEditFormData() {
			let params = {
				name : $("#nameId").val(),
				sort : $("#sortId").val(),
				remark : $("#remarkId").val(),
				parentId : $("#parentId").data("parentId")
			}
			return params;
		}

		function doHideTree() {
			$("#treeLayer").css("display", "none");
		}
		//确定按钮
		function doSetSelectNode() {
			//1.获取选中的节点对象
			let nodes = zTree.getSelectedNodes();
			if (nodes.length == 0)
				return;
			let node = nodes[0];
			//2.将对象中内容,填充到表单
			$("#parentId").data("parentId", node.id);
			$("#parentId").val(node.name);
			//3.隐藏树对象
			doHideTree();
		}
		function doLoadZtreeNodes() {
			let url =  `${baseUrl}/dept/treeNodes`;
			//异步加载数据,并初始化数据
			$.ajax({url:url,crossDomain:true,xhrFields:{withCredentials: true},success(result) {
				if (result.state == 1) {
					//使用init函数需要先引入ztree对应的js文件
					zTree = $.fn.zTree.init($("#zTreeId"), setting, result.data);
                    //显示div
                    $("#treeLayer").css("display", "block");
				} else {
					alert(result.message);
				}
			}})
		}
	</script>
    
    
    
    
    
    
    
    
    